@import "../../common.scss";

body{
	background-color: #fff;
	width: 100%;
	overflow: hidden;
}
.app{
	position: absolute;
	top: 0;
	bottom: ws(48);
	left: 0;
	right: 0;
	background-color: #F7F7F7;
}



.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 ws(15);
	background-color: #fff;
	.title{
		width: 100%;
		font-size: ws(25);
		border-bottom: 1px solid #eee;
		padding-bottom: ws(10);
	}
	.desc-content{
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: ws(15);
	}
	.icon-list{
		display: flex;
		align-items: center;
		justify-content: center;
		> img {
			width: ws(12);
			height: ws(12);
			margin: 0 ws(5);
		}
	}
	.content-body{
		p {
			word-wrap:break-word;
		}
		 img {
			max-width: 100%;
			margin-bottom: ws(10);
		}
	} 
	.btn-list{
		display: flex;
		justify-content: center;
		align-items: center;
		.item{
			margin: 0 ws(15);
			display: flex;
			display: flex;
			flex-direction: column;
			align-items: center;
			.icon{
				width: ws(80/2);
				height: ws(80/2);
				display: flex;
				margin-bottom: ws(10);
				align-items: center;
				justify-content: center;
				background-image: linear-gradient(-10deg, darken($main-color, 10%) 0%, lighten($main-color, 10%) 100%);
				border-radius: 50%;
				> img {
					width: ws(20);
					height: ws(20);
				}
			}
		}
	}
}

.comment{
		padding-bottom: ws(100);
		.liuyan{
			text-align: center;
		}
		.mui-table-view{
			background-color: transparent;
		}
		.mui-table-view:before,
		.mui-table-view:after{
			height: 0;
		}
		.mui-table-view-cell:after{
			right: 15px;
		}
		.mui-table-view-cell{
			padding: ws(15);
			display: flex;
			align-items: flex-start;
			.img{
				width: ws(35);
				height: ws(35);
				border-radius: 50%;
				overflow: hidden;
				>img {
					width: 100%;
					height: 100%;
				}
			}
			.comment-desc{
				flex: 1;
				margin-left: ws(10);
				margin-top: ws(10);
				.info{
					display: flex;
					justify-content: space-between;
					font-size: ws(15);
					color: #000;
				}
				.text{
					line-height: ws(38/2);
				}
			}
		}
	}

.bottom-textarea {
	position: absolute;
	width: 100%;
	height: ws(48);
	display: flex;
	align-items: center;
	padding: 0 ws(10);
	box-shadow: 0 0 ws(1) #bbb;
	background-color: #fff;
	z-index: 10;
	.textarea {
		flex: 1;
		height: ws(38);
		margin-bottom: 0;
		border: unset;
		background-color: #eee;
		font-size: ws(14);
		line-height: ws(18);
		border-radius: ws(5);
		padding: 0 ws(15);
		padding-top: ws(12);
	}
	.send {
		width: ws(50);
		height: ws(48);
		padding-right: ws(5);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}